<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html >
	<head>
		<meta charset="UTF-8">
		<title>用户登录</title>
		<!-- 导入bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
			$(function () {
				$("#login").click(function () {
					let username = $("#username").val();
					let password = $("#password").val();

					let user = {
						"username": username,
						"password": password,
					}
					$.ajax({
						url: "user/login",
						type: "post",
						contentType: "application/json; charset=utf-8",
						data: JSON.stringify(user),
						dataType: "json",
						success: function (result) {
							alert(result.data);
						}
					});
				});
			});
		</script>
	</head>
	<body>
		<div class="container-fluid"
			style="height: 923px ;">

			<div class="container" style="height: 680px; box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);">
				<div class="row">
					<div class="col-sm-6" align="center" style="height: 680px; border-right: 1px solid #000000;">
							<table class="form_table t1">
								<tr>
									<th>用户名：</th>
									<td>
										<input class="gray" type="text" name="username" id="username"
											placeholder="请输入用户名"  /><div id="namemsg" 
											style="color: red">${msguser}</div>
									</td>
								</tr>
								<tr>
									<th>密码：</th>
									<td><input class="gray" type="password" id="password" name="password"
											placeholder="请输入6-20位长度的密码"  /><span id="pwdmsg"></span></td>
								</tr>
								<tr>
									<td></td>
									<td><input class="btn btn-outline-primary btn-lg" id="login" type="button" value=" 登录 " style="color: white; background-color: #333399;"/>
									</td>
								</tr>
							</table>
					</div>
					<div class="col-sm-6" >
						<!--正常登录时-->
						<table width="560px" class="form_table prompt_3 t1">
							<col width="75px" />
							<col />
							<tr>
								<td>
									<p class="mt_10">
										<strong class="f14">您还不是蜗牛图书商城</span>用户
										</strong>
									</p>
									<p>
										现在免费注册成为蜗牛图书商城用户，便能立即享受便宜又放心的购物乐趣。<a class="blue" href="${pageContext.request.contextPath}/pages/index.jsp">网站首页>></a>
									</p>
									<p class="mt_10">
										<a class="reg_btn" href="${pageContext.request.contextPath}/pages/register.jsp"><button class="btn-lg btn-outline-primary" style="color: white; background-color: #333399;">注册新用户</button></a>
									</p>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div class="container" style="height: 90px;">
				<div class="" style="text-align: center;">
					<ul class="my-footer">
						<li><a href="">关于我们</a></li>
						<li><a href="">常见问题</a></li>
						<li><a href="">安全交易</a></li>
						<li><a href="">购买流程</a></li>
						<li><a href="">如何付款</a></li>
						<li><a href="">联系我们</a></li>
						<li><a href="">合作提案</a></li>
					</ul>
				</div>
				<div class="" style="clear: left; text-align: center;">
					<br>
					Copyright © 2015-2021 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>

				</div>
			</div>
		</div>
	</body>
</html>
